﻿<div class="row wrapper border-bottom white-bg page-heading"> <div class="col-lg-10"> <h2>我的流程</h2> <ol class="breadcrumb"> <li> <a href="index.html">首页</a> </li> <li> <a>工作流</a> </li> <li class="active"> <strong>我的流程</strong> </li> </ol> </div> <div class="col-lg-2"> </div> </div>
	<div class="wrapper wrapper-content animated fadeInRight">
			<div class="row">
				<div class="col-lg-12">
					<div class="ibox float-e-margins">
						<div class="ibox-content" style="border-radius:3px;">
							<div class="tab" role="tabpanel">
								<!-- Nav tabs -->
								<ul class="nav nav-tabs" role="tablist">
									<li role="presentation" class="active">
										<a href="#todoTab" role="tab" data-toggle="tab">待审批</a>
									</li>
									<li role="presentation" class="">
										<a href="#approvedTab" role="tab" data-toggle="tab" onclick="approvedTabClick()">已审批</a>
									</li>
									<li role="presentation" class="">
										<a href="#submitedTab" role="tab" data-toggle="tab" onclick="submitedTabClick()">已提交</a>
									</li>
								</ul>
								<!-- Tab panes -->
								<div class="tab-content tabs">
									<div role="tabpanel" class="tab-pane fade active in" id="todoTab">
										<table id="tbTodoList" class="table table-striped table-bordered table-hover  dataTable">
											<thead>
											<tr>
												<th style="text-align:center;">流程编号</th>
												<th style="text-align:center;">流程名称</th>
												<th style="text-align:center;">流程启动时间</th>
												<th style="text-align:center;">当前任务名称</th>
												<th style="text-align:center;">任务创建时间</th>
												<th style="text-align:center;">操作</th>
											</tr>
											</thead>
										</table>
									</div>
									<div role="tabpanel" class="tab-pane fade" id="approvedTab">
										<table id="tbApprovedList" class="table table-striped table-bordered table-hover  dataTable">
											<thead>
											<tr>
												<th style="text-align:center;">流程编号</th>
												<th style="text-align:center;">流程名称</th>
												<th style="text-align:center;">流程启动时间</th>
												<th style="text-align:center;">当前任务名称</th>
												<th style="text-align:center;">任务创建时间</th>
												<th style="text-align:center;">操作</th>
											</tr>
											</thead>
										</table>
									</div>
									<div role="tabpanel" class="tab-pane fade" id="submitedTab">
										<table id="tbSubmitedList" class="table table-striped table-bordered table-hover  dataTable">
											<thead>
											<tr>
												<th style="text-align:center;">流程编号</th>
												<th style="text-align:center;">流程名称</th>
												<th style="text-align:center;">流程启动时间</th>
												<th style="text-align:center;">当前任务名称</th>
												<th style="text-align:center;">任务创建时间</th>
												<th style="text-align:center;">操作</th>
											</tr>
											</thead>
										</table>
									</div>
								</div>
							</div>
						</div>
				</div>
			</div>
			</div>

		<!--<a data-toggle="popover" data-placement="right"-->
		   <!--data-content="<img src='http://10.1.8.109:8250/csm-api/temp/qrcode?empNo=TP2' />">asdasd</a>-->
	</div>

<style type="text/css">		.container{padding: 2em 0;}
a:hover,a:focus{		    outline: none;		    text-decoration: none;		}
.tab .nav-tabs{
	position: relative;
	/*border-bottom:none;*/
}
.tab .nav-tabs li{		    text-align: center;		    margin-right: 10px;		}
.tab .nav-tabs li a{display: block;font-size: 16px;font-weight:600;color: #444;padding:10px 15px;
	background: transparent;margin-right: 0;border: none;border-radius: 0;overflow: hidden;
	position: relative;		    z-index: 1;		    transition: all 0.5s ease 0s;		}
.tab .nav-tabs li a:before{
	content: "";
	width:100%;
	/*height:3px;*/
	background:#1ab394;
	position:absolute;
	/*top: 92%;*/
	top:0;
	left:0;
	transition: all 0.3s ease 0s;
}
.tab .nav-tabs li a:hover:before, .tab .nav-tabs li.active a:before, .tab .nav-tabs li.active a:hover:before{
	/*top:0;*/
	top:92%;
	height:3px;
}
.tab .nav-tabs li a:after{
	content: "";		    width: 100%;
	height: 100%;
	background: #fff;		    position: absolute;
	top: 100%;		    left: 0;		    z-index: -1;		    transition: all 0.3s ease 0s;		}
.tab .nav-tabs li a:hover:after, .tab .nav-tabs li.active a:after, .tab .nav-tabs li.active a:hover:after{
	/*top: 0;		*/
}
.nav-tabs li.active a,		.nav-tabs li.active a:focus,		.nav-tabs li.active a:hover,		.nav-tabs li a:hover{		    border: none;		}
.tab .tab-content{		    padding: 30px 15px 20px;		    background: #fff;
	font-size: 14px;		    color: #555;		    line-height: 26px;		}
.tab .tab-content h3{		    font-size: 24px;		    margin-top: 0;		}
@media only screen and (max-width: 479px){		    .tab .nav-tabs li{ width: 100%; }		}
</style>
<link href="lib/datatables/1.10.4/dataTables.bootstrap.css" rel="stylesheet">
<script src="lib/datatables/1.10.4/jquery.dataTables.js"></script>
<script src="lib/datatables/1.10.4/dataTables.bootstrap.js"></script>
<!--要在最下面设置全局参数-->
<script src="lib/datatables/1.10.4/dataTables.extend.js"></script>

<script src="lib/touchspin/jquery.bootstrap-touchspin.js"></script>
<link href="lib/touchspin/jquery.bootstrap-touchspin.css" rel="stylesheet">
<script type="text/javascript">


</script>